<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<div class="gv-sub-content">
  <div class="gv-alerts-alert gv-forms gv-forms-fluid" layout="column">
    <div class="gv-forms" layout="column">
      <div class="gv-forms-header">
        <h1 ng-if="$ctrl.updateMode">[{{ $ctrl.titlePrefix }}] {{$ctrl.alert.name}}</h1>
        <h1 ng-if="!$ctrl.updateMode">[{{ $ctrl.titlePrefix }}] Create a new alert</h1>
        <a ng-click="$ctrl.backToAlerts()">Back to alerts</a>
      </div>

      <div class="gv-page-draft-banner" ng-if="$ctrl.status.available_plugins === 0">
        <ng-md-icon icon="warning" class="gv-warning"></ng-md-icon>
        No alert plugin is installed. Please install a plugin before being able to define alert rules.
        <br />
      </div>

      <form name="$ctrl.formAlert" ng-submit="$ctrl.save($ctrl.alert)" novalidate>
        <md-tabs md-dynamic-height="$ctrl.resize" md-selected="$ctrl.selectedTab" md-stretch-tabs="always">
          <md-tab md-on-select="$ctrl.currentTab=$ctrl.selectTab(0)">
            <md-tab-label>Alert</md-tab-label>
            <md-tab-body>
              <div class="gv-form">
                <h3>General</h3>
                <div class="gv-form-content" layout="column">
                  <div layout-gt-sm="row">
                    <md-input-container class="md-block" flex="70">
                      <label>Name</label>
                      <input
                        ng-model="$ctrl.alert.name"
                        name="name"
                        minlength="3"
                        md-maxlength="50"
                        required
                        autofocus
                        ng-disabled="$ctrl.isReadonly()"
                        aria-label="Alert name"
                      />
                      <div class="hint" ng-if="$ctrl.formAlert.name.$valid || $ctrl.formAlert.name.$pristine">Alert name.</div>
                      <div ng-messages="$ctrl.formAlert.name.$error">
                        <div ng-message="required">Name is required.</div>
                        <div ng-message="minlength">Name has to be more than 3 characters long.</div>
                        <div ng-message="md-maxlength">Name has to be less than 50 characters long.</div>
                      </div>
                    </md-input-container>

                    <md-input-container
                      class="md-block"
                      flex="30"
                      ng-if="$ctrl.alert.template === undefined || $ctrl.alert.template === false"
                    >
                      <md-checkbox
                        ng-model="$ctrl.alert.enabled"
                        aria-label="Enable this alert trigger"
                        class="md-primary md-align-top-left"
                        flex
                        ng-disabled="$ctrl.isReadonly()"
                      >
                        Enable this alert
                      </md-checkbox>
                    </md-input-container>
                  </div>

                  <div layout-gt-sm="row">
                    <md-input-container class="md-block" flex="70">
                      <label>Rule</label>
                      <md-select ng-model="$ctrl.alert.type" required ng-disabled="$ctrl.updateMode" ng-change="$ctrl.onRuleChange()">
                        <md-optgroup label="{{group}}" ng-repeat="group in $ctrl.groups">
                          <md-option ng-value="rule.source + '@' + rule.type" ng-repeat="rule in $ctrl.rules | filter: {category: group}"
                            >{{rule.description}}
                          </md-option>
                        </md-optgroup>
                      </md-select>
                    </md-input-container>

                    <md-input-container class="md-block" flex="30">
                      <label>Severity</label>
                      <md-select ng-model="$ctrl.alert.severity" required ng-disabled="$ctrl.isReadonly()">
                        <md-option ng-value="severity" ng-repeat="severity in $ctrl.severities"> {{severity | lowercase}} </md-option>
                      </md-select>
                    </md-input-container>
                  </div>

                  <div layout-gt-sm="row">
                    <md-input-container class="md-block" flex-gt-sm>
                      <label>Description</label>
                      <input
                        ng-model="$ctrl.alert.description"
                        name="name"
                        aria-label="Alert description"
                        ng-disabled="$ctrl.isReadonly()"
                      />
                    </md-input-container>
                  </div>
                </div>
              </div>

              <div ng-if="($ctrl.template && !$ctrl.updateMode) || $ctrl.alert.template">
                <h2>Template</h2>
                <div class="gv-form-content" layout="column">
                  <div layout-gt-sm="row">
                    <md-input-container class="md-block" flex="50" ng-if="$ctrl.alert.reference_type === 2 && !$ctrl.updateMode">
                      <md-checkbox
                        ng-model="$ctrl.alert.template"
                        ng-disabled="$ctrl.updateMode"
                        aria-label="Define as template"
                        class="md-primary md-align-top-left"
                        flex
                      >
                        Define as template
                      </md-checkbox>
                    </md-input-container>

                    <md-input-container clas="md-block" flex="50">
                      <md-checkbox
                        ng-model="$ctrl.apiByDefault"
                        ng-click="$event.stopPropagation()"
                        aria-label="Associate to every new API"
                        class="md-primary md-align-top-left"
                        flex
                      >
                        Create automatically the alert for every new API
                      </md-checkbox>
                    </md-input-container>
                  </div>

                  <div class="md-actions gravitee-api-save-button" layout="row" ng-if="$ctrl.updateMode">
                    <md-button
                      aria-label="Associate to existing APIs"
                      ng-click="$ctrl.associateToApis()"
                      class="md-actions md-raised md-primary"
                    >
                      Associate the alert to existing APIs
                    </md-button>
                  </div>
                </div>
              </div>

              <gv-alert-trigger-timeframe alert="$ctrl.alert" form="$ctrl.formAlert"></gv-alert-trigger-timeframe>

              <div>
                <div class="gv-forms-header">
                  <h3>Condition</h3>
                  <div class="ipsum">Field metrics and condition for the rule</div>
                </div>

                <div class="gv-form-content" layout="column">
                  <div class="gv-alerts-alert_trigger-msg" ng-if="$ctrl.alert.type == null">
                    Select a rule before setting the condition.
                  </div>

                  <gv-alert-trigger-missing-data
                    ng-if="$ctrl.alert.type.endsWith('@MISSING_DATA')"
                    alert="$ctrl.alert"
                  ></gv-alert-trigger-missing-data>

                  <gv-alert-trigger-metrics-simple-condition
                    ng-if="$ctrl.alert.type === 'REQUEST@METRICS_SIMPLE_CONDITION'"
                    alert="$ctrl.alert"
                  ></gv-alert-trigger-metrics-simple-condition>

                  <gv-alert-trigger-metrics-simple-condition
                    ng-if="$ctrl.alert.type === 'NODE_HEARTBEAT@METRICS_SIMPLE_CONDITION'"
                    alert="$ctrl.alert"
                  ></gv-alert-trigger-metrics-simple-condition>

                  <gv-alert-trigger-metrics-aggregation
                    ng-if="$ctrl.alert.type === 'REQUEST@METRICS_AGGREGATION'"
                    alert="$ctrl.alert"
                  ></gv-alert-trigger-metrics-aggregation>

                  <gv-alert-trigger-metrics-aggregation
                    ng-if="$ctrl.alert.type === 'NODE_HEARTBEAT@METRICS_AGGREGATION'"
                    alert="$ctrl.alert"
                  ></gv-alert-trigger-metrics-aggregation>

                  <gv-alert-trigger-metrics-rate
                    ng-if="$ctrl.alert.type === 'REQUEST@METRICS_RATE'"
                    alert="$ctrl.alert"
                  ></gv-alert-trigger-metrics-rate>

                  <gv-alert-trigger-metrics-rate
                    ng-if="$ctrl.alert.type === 'NODE_HEARTBEAT@METRICS_RATE'"
                    alert="$ctrl.alert"
                  ></gv-alert-trigger-metrics-rate>

                  <gv-alert-trigger-api-health-check-status-changed
                    ng-if="$ctrl.alert.type === 'ENDPOINT_HEALTH_CHECK@API_HC_ENDPOINT_STATUS_CHANGED'"
                    alert="$ctrl.alert"
                  ></gv-alert-trigger-api-health-check-status-changed>

                  <gv-alert-trigger-node-lifecycle-changed
                    ng-if="$ctrl.alert.type === 'NODE_LIFECYCLE@NODE_LIFECYCLE_CHANGED'"
                    alert="$ctrl.alert"
                  ></gv-alert-trigger-node-lifecycle-changed>

                  <gv-alert-trigger-node-healthcheck
                    ng-if="$ctrl.alert.type === 'NODE_HEALTHCHECK@NODE_HEALTHCHECK'"
                    alert="$ctrl.alert"
                  ></gv-alert-trigger-node-healthcheck>

                  <gv-alert-trigger-application-quota
                    ng-if="$ctrl.alert.type === 'REQUEST@APPLICATION_QUOTA'"
                    alert="$ctrl.alert"
                  ></gv-alert-trigger-application-quota>
                </div>
              </div>

              <!-- Additional filters -->
              <gv-alert-trigger-filters
                alert="$ctrl.alert"
                form="$ctrl.formAlert"
                is-readonly="$ctrl.isReadonly()"
              ></gv-alert-trigger-filters>
            </md-tab-body>
          </md-tab>

          <md-tab md-on-select="$ctrl.currentTab=$ctrl.selectTab(1)">
            <md-tab-label>Notifications</md-tab-label>
            <md-tab-body>
              <!-- Dampening -->
              <gv-alert-trigger-dampening dampening="$ctrl.alert.dampening" is-readonly="$ctrl.isReadonly()"></gv-alert-trigger-dampening>

              <gv-alert-notifications alert="$ctrl.alert" is-readonly="$ctrl.isReadonly()"></gv-alert-notifications>
            </md-tab-body>
          </md-tab>

          <md-tab md-on-select="$ctrl.currentTab=$ctrl.selectTab(2)" ng-disabled="!$ctrl.updateMode || $ctrl.alert.template">
            <md-tab-label>History</md-tab-label>
            <md-tab-body>
              <gv-alert-history alert="$ctrl.alert"></gv-alert-history>
            </md-tab-body>
          </md-tab>
        </md-tabs>

        <!-- Form actions -->
        <div class="md-actions gravitee-api-save-button" layout="row">
          <md-button
            ng-if="$ctrl.hasPermissionForCurrentScope('alert-u') && $ctrl.updateMode"
            class="md-raised md-primary"
            type="submit"
            ng-disabled="$ctrl.status.available_plugins === 0 || $ctrl.formAlert.$invalid || $ctrl.formAlert.$pristine"
          >
            Update
          </md-button>
          <md-button
            ng-if="$ctrl.hasPermissionForCurrentScope('alert-c') && !$ctrl.updateMode"
            class="md-raised md-primary"
            type="submit"
            ng-disabled="$ctrl.status.available_plugins === 0 || $ctrl.formAlert.$invalid || $ctrl.formAlert.$pristine"
          >
            Create
          </md-button>

          <md-button
            ng-if="$ctrl.hasPermissionForCurrentScope('alert-d')"
            class="md-raised"
            type="button"
            ng-click="$ctrl.reset()"
            ng-disabled="$ctrl.status.available_plugins === 0 || $ctrl.formAlert.$invalid || $ctrl.formAlert.$pristine"
          >
            Reset
          </md-button>
          <md-button
            class="md-raised md-warn float-right"
            ng-if="$ctrl.hasPermissionForCurrentScope('alert-d') && $ctrl.updateMode"
            ng-disabled="$ctrl.status.available_plugins === 0"
            type="button"
            ng-click="$ctrl.delete()"
          >
            Delete
          </md-button>
        </div>
      </form>
    </div>
  </div>
</div>
